<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function $(idName){
        return document.getElementById(idName);
    }

    function changeWordYes(idName){
        $(idName).style.color="green";
        $(idName).innerHTML="输入有效";
    }
    function changeWordNo(idName){
        $(idName).style.color="red";
        $(idName).innerHTML="输入无效";
    }
    function isName(){
        var username=/^[a-zA-Z]{2,20}$/;
        if (username.test($("username").value)){
            changeWordYes("idSpan")
        }else{
            changeWordNo("idSpan")
        }
    }
    function isPwd(){
        var password=/^[0-9]{6}$/;
        if (password.test($("password").value)){
            changeWordYes("pwdSpan")
        }else{
            changeWordNo("pwdSpan")
        }
    }
    function isMail(){
        var mail=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        if (mail.test($("mail").value)){
            changeWordYes("mailSpan")
        }else{
            changeWordNo("mailSpan")
        }
    }
    function isPhone(){
        var phone=/^1[358][0-9]{9}$/;
        if (phone.test($("phone").value)){
            changeWordYes("phoneSpan")
        }else{
            changeWordNo("phoneSpan")
        }
    }
    function isBirthday(){
        var bir=/^(\d{4})(-)(\d{2})(-)(\d{2})$/;
        if (bir.test($("birthday").value)){
            changeWordYes("birthdaySpan")
        }else{
            changeWordNo("birthdaySpan")
        }
    }
</script>
<body>
<form>
    账号<input type="text" id="username" onblur="isName()">
    <span id="idSpan"></span><br>
    密码<input type="password" id="password" placeholder="请输入6位数字密码" onblur="isPwd()">
    <span id="pwdSpan"></span><br>
    邮箱<input type="email" id="mail" placeholder="请输入邮箱" onblur="isMail()">
    <span id="mailSpan"></span><br>
    电话<input type="text" id="phone" placeholder="请输入电话号码" onblur="isPhone()">
    <span id="phoneSpan"></span><br>
    生日<input type="text" id="birthday" placeholder="请输入生日（XXXX-XX-XX）" onblur="isBirthday()">
    <span id="birthdaySpan"></span>


</form>
</body>

</html>